<template>
  <div style="width: 100%; height: 400px">
    <el-empty v-if="emptyVisible" :description="$t('common.empty_tip')" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
import { getChartData } from '@/api/chart'
export default {
  mixins: [resize],
  props: {
    chartMode: Object
  },
  data() {
    return {
      xAxisData: [],
      series: [],
      chart: null,
      emptyVisible: false,
      legend: []
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      getChartData(this.chartMode).then((res) => {
        this.xAxisData = res.xaxisData
        this.series = res.seriesList
        if (this.series != null && this.series.length > 0) {
          this.legend = []
          this.series.forEach((arg) => {
            this.legend.push(arg.name)
          })
          this.initChart()
        } else {
          this.emptyVisible = true
        }
      }).catch((err) => {
          this.$confirmError(err)
        })
    },
    initChart() {
      this.chart = echarts.init(this.$el)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: this.legend
        },
        xAxis: {
          axisLine: false,
          axisLabel: {
            show: true,
            color: '#95aac9'
          },
          type: 'category',
          data: this.xAxisData
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            color: '#95aac9',
            formatter: '{value}'
          }
          // name: 'effective percent'
        },
        series: this.series
      }
      this.chart.setOption(option, true)
    }
  }
}
</script>

<style>
</style>
